<template>
  <div class="commonUser">
    <el-row style="margin: 10px 0px;text-align: right;"><el-button @click="addMenu">新增菜单</el-button></el-row>
    <el-table border :tree-props="{children: 'children'}" row-key="menuId" :data="tableData" style="width: 100%">
      <el-table-column label="菜单ID" prop="menuId"></el-table-column>
      <el-table-column label="菜单名称" prop="menuName"></el-table-column>
      <el-table-column label="排序序号" prop="sortNumber"></el-table-column>
      <el-table-column label="菜单图标" prop="menuIcon"></el-table-column>
      <el-table-column label="URL" prop="url"></el-table-column>
      <el-table-column label="更新时间" prop="updateDate"></el-table-column>
      <el-table-column label="操作">
          <template slot-scope="props">
              <el-button size="small" type="default" @click="modify(props.row)">修改</el-button>
              <el-button size="small" type="danger" @click="del(props.row)">删除</el-button>
          </template>
      </el-table-column>
    </el-table>
    <addOrEdit :off.sync="addMenuDialog" :type="type" :rowData="rowData"></addOrEdit>
  </div>
</template>

<script>
    import { getMenuList, delMenu } from "@/api/menu.js"
    export default {
        name: "menuList",
        components: {
           "addOrEdit": () => import("./addOrEdit.vue"),
        },
        created(){
            this.getList();
        },
        methods: {
            addMenu(){
                this.type = "add";
                this.addMenuDialog = true;
            },
            getList(){
                getMenuList({
                    currentPage:this.currentPage,
                    pageSize: this.pageSize
                }).then(
                    res => {
                        this.tableData = res.data.list;
                    },
                    err => {}
                );
            },
            modify(row){
                 this.type = "edit";
                 this.rowData = row;
                 this.addMenuDialog = true;
            },
            del(row){
                delMenu({menuId: row.menuId}).then(
                    res => {
                        this.$message({
                            type: "success",
                            message: "删除成功"
                        });
                        this.getList();
                    },
                    err => {}
                );
            }
        },
        data(){
            return {
                addMenuDialog: false,
                type: "",
                rowData: {},
                pageSize: 15,
                currentPage: 1,
                totalElements: 0,
                totalPages: 1,
                tableData: []
            }
        }
    }
</script>

<style></style>